<template>
  <div style="margin:0;padding:0;height:100%;width:100%;">
    <dv-full-screen-container style="background:#000;height:100%;width:100%;">
      <div
        class="box"
        style="height:25%"
      >
        <div style="flex:0 1 50%;">
          <dv-border-box-1 style="width:100%;">
            <!-- 图表 -->
            <lineChart style="width:100%;height:100%" />
          </dv-border-box-1>
        </div>
        <div style="flex:0 1 50%;">
          <dv-border-box-4 style="width:100%;">
            <dv-capsule-chart
              :config="config"
              style="height:92%;width:96%;padding-top:20px ;margin:0 auto"
            />
          </dv-border-box-4>
        </div>
      </div>


      <div
        class="box"
        style="height:25%"
      >
        <div style="flex:0 1 50%;">
          <dv-border-box-1 style="width:100%;">
            <!-- 图表 -->
            <lineChart style="width:100%;height:100%" />
          </dv-border-box-1>
        </div>
        <div style="flex:0 1 50%;">
          <dv-border-box-4 style="width:100%;">
            <dv-capsule-chart
              :config="config"
              style="height:92%;width:96%;padding-top:20px ;margin:0 auto"
            />
          </dv-border-box-4>
        </div>
      </div>

      <div
        class="box"
        style="height:35%"
      >
        <div style="flex:0 1 50%;">
          <dv-border-box-1 >
            <!-- 图表 -->
            <lineChart style="width:100%;height:100%" />
          </dv-border-box-1>
        </div>
        <div style="flex:0 1 50%;">
          <dv-border-box-4 >
            <dv-capsule-chart
              :config="config"
              style="height:92%;width:96%;padding-top:20px ;margin:0 auto"
            />
          </dv-border-box-4>
        </div>
      </div>

    </dv-full-screen-container>
  </div>
</template>

<script>
import lineChart from "./components/lineChart.vue";
export default {
  components: { lineChart },
  data() {
    return {
      config: {
        data: [
          {
            name: "周口",
            value: 55
          },
          {
            name: "南阳",
            value: 120
          },
          {
            name: "西峡",
            value: 78
          },
          {
            name: "驻马店",
            value: 66
          },
          {
            name: "新乡",
            value: 80
          }
        ]
      }
    };
  },
  created() {},
  methods: {}
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: space-between;
}
</style>